<template>
    <div class="container">
        <m-header></m-header>
        <div class="menu-content">
              <div class="menu" v-for="(item,index) in menuListData" :key="index" @click="gotoDetail(item.id,item.community_name)">
                    <img class="menu-img" :src="'http://47.104.186.142:8000/'+item.banner">
                    <h2 class="title">{{item.period_number}}菜谱（{{item.community_name}}）</h2>
                    <div class="time-content">
                        <p>订餐时间： <span>{{item.order_time}}</span></p>
                        <p>送餐时间： <span>{{item.delivery_time}}</span></p>
                    </div>
                    <div class="recommend">
                        <div class="left">本期推荐:</div>
                        <div class="right">
                             <span class="remarks"> {{item.hot_push}} </span>
                        </div>
                    </div>
                    <state-tag class="state-tag" :text="item.status=='close' || item.status=='Close' ?'订餐结束':'正在进行'" :color="item.status=='close' || item.status=='Close' ?'#7f7d7d':'#f20c00'"></state-tag>
              </div>
        </div>
    </div>
</template>

<script type="text/ecamscript-6">
import timeFormat from "@/commom/js/timeFormat";
import stateTag from "@/components/menuList/stateTag";
import mHeader from "@/components/mHeader/mHeader";
import axios from "axios";

export default {
  data() {
    return {
      menuListData: [],
      communityId: "",
      showModal2: false,
      openId:"",
      userId:"",
      ucode:""
    };
  },
  components: {
    stateTag,
    mHeader
  },
  created() {

     // 用户从微信环境打开首页面，链接后携带openId和useId这两个参数
     // console.log("这是ucode"+this.$route.query.ucode);
     let u_code_temp = this.$route.query.ucode;
     let _this = this;

     // 请求后台ucode接口
     this.$axios({
       method: "get",
       url: "http://47.104.186.142:80/code/ucode",
       params: {
          ucode: u_code_temp
       }
      }).then(res => {
        // console.log(res.data);
        if(res.data.code == 0){
            localStorage.setItem("setOpenId",res.data.data.oid);
            localStorage.setItem("setUserId",res.data.data.uid); 
        }else{
            // ucode不正确,跳转微信授权登陆【后台程序接口】
             window.location.href="http://tanqin520.udutech.com/login?state=menulist" 
        }
     });

    // 点击地址列表选择社区，用community_id页面跳转传参
    this.communityId = sessionStorage.getItem("setAddressId");

    this.$axios({
      method: "get",
      url: "http://47.104.186.142:80/delivery/commOne"
    }).then(res => {
      _this.communityId = res.data.data.id;

      if (!sessionStorage.getItem("setAddressId")) {
        // 页面初始值为默认社区列表中第一条数据信息
        this.$axios({
          method: "get",
          url: "http://47.104.186.142:80/cookbook/getCookbooksByCommunity",
          params: {
            community_id: res.data.data.id //传的参数是community_id
          }
        }).then(res => {
          _this.menuListData = res.data.data;
       })} else {
        // 点击地址列表，切换社区信息，同时刷新社区菜谱列表
        // 此时localStorage.getItem("setAddressId")存储的community_id变量非空，作为传参值
        this.$axios({
          method: "get",
          url: "http://47.104.186.142:80/cookbook/getCookbooksByCommunity",
          params: {
            community_id: sessionStorage.getItem("setAddressId") //传的参数是community_id
          }
        }).then(res => {
           _this.menuListData = res.data.data;
        });
      }
    });

  },
  filters: {
    timeFormat
  },
  methods: {
    // 根据菜品id，跳转对应菜谱详情页面
    gotoDetail(id, updateName) {
      localStorage.setItem("setMenuDetailId", id);
      localStorage.setItem("updateName", updateName);

      this.$router.push({
        path: `/menudetail`
      });
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin';

.container {
    .menu-content {
        background-color: #f0f0f0;
        position: absolute;
        top: 44px;
        bottom: 0;
        left: 0;
        right: 0;

        .menu {
            position: relative;
            padding: 0 15px;
            background-color: #ffffff;
            margin-bottom: 10px;

            .menu-img {
                width: 100%;
                height: auto;
                border-radius: 5px;
                margin: 10px 0 15px;
            }

            .title {
                color: #333333;
                font-size: 15px;
            }

            .time-content {
                padding: 12px 0 8px;
                color: #f76d5c;
                font-size: 12px;
                line-height: 20px;
            }

            .recommend {
                display: flex;
                padding-bottom: 15px;
                color: #333333;
                font-size: 13px;

                .left {
                    flex: 0 0 60px;
                    line-height: 18px;
                }

                .right {
                    padding-right: 20px;
                    line-height: 18px;
                }

                .remarks {
                    padding-right: 8px;
                }
            }

            .state-tag {
                position: absolute;
                top: 25px;
            }

            :last-child {
                margin-bottom: 0;
            }
        }
    }

    .loading-container {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>